<template>
  <el-select
    v-model="model"
    :multiple="multiple"
    placeholder="请选择"
    @change="change"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.title"
      :value="item.id"
    />
  </el-select>
</template>

<script setup>
import { ref } from "vue";
import { getMallCategoryPage } from "@/api/operateManage";

const props = defineProps({
  multiple: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["change"]);
const model = defineModel();
const options = ref([]);

const getCategoryList = async () => {
  const { data } = await getMallCategoryPage({
    pageNo: 1,
    pageSize: 1000,
  });
  options.value = data.records;
};

const change = (value) => {
  const findItem = options.value.find((item) => item.id === value);
  emit("change", value, findItem);
};

onMounted(async () => {
  await getCategoryList();
});
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>
